<template>
  <div>
    <div class="menu-box">
      <ul class="menu-list">
        <li @click="page='DefaultPage'">默认页面</li>
        <li @click="page='ErrorPage'">错误处理</li>
        <li @click="page='AssetsPage'">静态资源处理</li>
        <li @click="page='StylePage'">样式处理</li>
        <li @click="page='LessPage'">动态样式</li>
        <li @click="page='AjaxNotUtil'">ajax非工具应用</li>
        <li @click="page='AxiosUsePage'">axios的使用规则</li>
        <li @click="page='AjaxCors'">模块化项目的跨域分类</li>
        <li @click="page='AjaxUtil'">axios工具模块化&Vue全局功能</li>
      </ul>
    </div>
    <component class="content" :is="page"></component>
  </div>
</template>

<script>
import DefaultPage from "@/pages/DefaultPage.vue"
import ErrorPage from '@/pages/ErrorPage.vue'
import AssetsPage from '@/pages/AssetsPage.vue'
import StylePage from '@/pages/StylePage.vue'
import LessPage from '@/pages/LessPage.vue'
import AjaxNotUtil from '@/pages/AjaxNotUtil.vue'
import AxiosUsePage from '@/pages/AxiosUsePage.vue'
import AjaxCors from '@/pages/AjaxCors.vue'
import AjaxUtil from '@/pages/AjaxUtil.vue'

export default {
  components: {
    DefaultPage,ErrorPage,AssetsPage,StylePage,LessPage,AjaxNotUtil,
    AxiosUsePage,AjaxCors,AjaxUtil
  },
  data() {
    return {
      page: "AjaxUtil",
    };
  },
};
</script>

<style scoped>
.menu-box {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 60px;
  background-color: #333;
  box-shadow: 0 0 12px black;
  z-index: 99999;
}
.menu-list {
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-flow: row nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  user-select: none;
}
.menu-list > li {
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  height: 100%;
  margin: 0px 10px;
  padding: 0px 10px;
  color: white;
  display: flex;
  align-items: center;
}
.menu-list > li:hover {
  background-color: orangered;
}
.content {
  margin-top: 100px!important;
  padding-bottom: 600px;
}
</style>